<template>
  <view class="content">
    <view class="head_background">
      <text>宏烨找房</text>
      <view class="search">
        <u-search
          placeholder="日照香炉生紫烟"
          v-model="keyword"
          :showAction="false"
        ></u-search>
      </view>
    </view>
    <!-- 轮播图 -->
    <swiper class="swiper" indicator-dots autoplay circular>
      <swiper-item v-for="(item, index) in list1" :key="index">
        <image
          class="lbt"
          :src="item.image_img"
          mode="scaleToFill"
          @click="click"
        />
      </swiper-item>
    </swiper>
    <!-- 宫格 -->
    <view class="grid">
      <u-grid :border="false" @click="click" col="5">
        <u-grid-item
          v-for="(item, index) in list"
          :key="index"
          class="grid-item"
        >
          <image class="grid-img" :src="item.name" mode="scaleToFill" />
          <text class="grid-text">{{ item.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 楼市资讯 -->
    <view class="text-title">
      <text class="text-bold">楼市资讯</text>
      <text class="text-text">更多</text>
    </view>
    <view class="profile"></view>
    <!-- 热门楼盘 -->
    <view class="text-title">
      <text class="text-bold">热门楼盘</text>
      <text class="text-text">更多</text>
    </view>
    <view class="asd"> </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //搜索
      keyword: "",
      //宫格列表
      list: [
        {
          name: "http://10.31.71.56:7001/public/upload/mf.gif",
          title: "买房",
          path: "maifang/maifang",
        },
        {
          name: "http://10.31.71.56:7001/public/upload/zf.gif",
          title: "租房",
          path: "zufang/zufang",
        },
        {
          name: "http://10.31.71.56:7001/public/upload/qz.gif",
          title: "求租",
          path: "qiuzu/qiuzu",
        },
        {
          name: "http://10.31.71.56:7001/public/upload/qg.gif",
          title: "求购",
          path: "qiugou/qiugou",
        },
        {
          name: "http://10.31.71.56:7001/public/upload/dt.gif",
          title: "地图找房",
          path: "map_zhao/map_zhao",
        },
        {
          name: "http://10.31.71.56:7001/public/upload/zx.gif",
          title: "咨询",
          path: "zixun/zixun",
        },
        {
          name: "http://10.31.71.56:7001/public/upload/lsq.gif",
          title: "楼市圈",
          path: "loushiquan/loushiquan",
        },
        {
          name: "http://10.31.71.56:7001/public/upload/jjr.gif",
          title: "经纪人",
          path: "jingjiren/jingjiren",
        },
        {
          name: "http://10.31.71.56:7001/public/upload/tg.gif",
          title: "团购看房",
          path: "tuangoukanfang/tuangoukanfang",
        },
        {
          name: "http://10.31.71.56:7001/public/upload/zb.gif",
          title: "直播看房",
          path: "livelookhouse/livelookhouse",
        },
      ],
      //轮播图列表
      list1: [],
      //咨询list
      indexList: [],
      urls: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
        "https://cdn.uviewui.com/uview/album/4.jpg",
        "https://cdn.uviewui.com/uview/album/5.jpg",
      ],
      //经纪人list
    };
  },
  onLoad() {
    this.loadmore();
    uni.request({
      url: "http://10.31.71.56:7001/api/img",
      header: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "X-Requested-With": "XMLHttpRequest",
      },
      method: "GET",
      sslVerify: true,
      success: (res) => {
        console.log(res);
        this.list1 = res.data.result;
      },
    });
  },
  methods: {
    //uToast
    click(name) {
      this.$refs.uToast.success(`点击了第${name}个`);
    },
    //gird跳转
    goRoute(path) {
      uni.navigateTo({
        url: `/packpages/${path}`,
      });
    },
    //list
    // scrolltolower() {
    //   this.loadmore();
    // },
    loadmore() {
      for (let i = 0; i < 5; i++) {
        this.indexList.push({
          url: this.urls[uni.$u.random(0, this.urls.length - 1)],
        });
      }
    },
    changes() {},
  },
};
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // overflow-y: auto;
  .head_background {
    background-color: #2593fa;
    width: 100vw;
    height: 100px;
    padding-top: 30px;
    color: #fff;
    text {
      display: flex;
      align-items: center;
      padding-left: 10px;
    }
    .search {
      margin-top: 24px;
    }
  }
  // 轮播图
  .swiper {
    width: 100vw;
    height: 150px;
    .lbt {
      width: 100vw;
    }
  }
  .grid {
    width: 100vw;
    .grid-img {
      width: 50px;
      height: 50px;
      margin-top: 10px;
    }
  }
  .text-title {
    width: 100vw;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    text {
      padding: 0 15px;
    }
    .text-bold {
      font-size: 20px;
      font-weight: bold;
    }
    .text-text {
      font-size: 15px;
      color: #ccc;
    }
  }
  .profile {
    width: 90vw;
    height: 200px;
    background: #fff;
    margin-left: 5vw;
    margin-top: 10px;
    box-shadow: 1px 1px 10px 1px #ccc;
  }
  .asd {
    width: 100vw;
    height: 500px;
    background: red;
  }
}
</style>
